<template>
  <card-layout title="模型分析" class="chart" bg="3">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="card-form">
      <div class="item">
        <div class="item-label">网格线显示</div>
        <div class="item-input">
          <el-switch @change="onWireframeChecked" v-model="wireframeEnabled" />
        </div>
      </div>
      <!-- <div class="item">
        <div class="item-label">地层开关</div>
        <div class="item-input">
          <el-switch
            @change="onShowLayerChecked"
            v-model="showLayer"
            style="height: 24px"
          />
        </div>
      </div> -->
      <div class="item">
        <div class="item-label">标注显示</div>
        <div class="item-input">
          <el-switch v-model="showMark" @change="onShowMarkChecked" />
        </div>
      </div>
      <div class="item">
        <div class="item-label">高程显示</div>
        <div class="item-input">
          <el-switch @change="onShowAltChecked" v-model="showAlt" />
        </div>
      </div>
      <!-- <div class="item">
        <div class="item-label">地层爆炸</div>
        <div class="item-input">
          <el-slider
            v-model="explosionVal"
            @input="onExplosionChange"
            :min="0"
            :max="1000"
            size="small"
          />
        </div>
      </div> -->

      <div class="item">
        <div class="item-label">模型抬升</div>
        <div class="item-input">
          <el-switch @change="onLiftingChecked" v-model="liftingChecked" />
        </div>
        <!-- <div class="item-input">
          <el-slider
            v-model="liftingVal"
            @input="onLiftingChange"
            :min="0"
            :max="1000"
            size="small"
          />
        </div> -->
      </div>
      <div class="item">
        <div class="item-label">属性查询</div>
        <div class="item-input">
          <el-switch
            @change="onShowPropertyNameChekced"
            v-model="propertyQuery"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-label">地层选中</div>
        <div class="item-input">
          <el-switch
            @change="onLayerSelectedChecked"
            v-model="layerSelectedChecked"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-label">地层爆炸</div>
        <div class="item-input">
          <el-switch @change="onExplosionChecked" v-model="explosionChecked" />
          <!-- <el-slider
            v-model="explosionVal"
            @input="onExplosionChange"
            :min="0"
            :max="1000"
            size="small"
          /> -->
        </div>
      </div>
      <div class="item">
        <div class="item-label">模型缩放</div>
        <div class="item-input">
          <el-slider
            v-model="scaleVal"
            :min="1"
            :max="10"
            :step="0.1"
            size="small"
            @input="onScaleChange"
          />
        </div>
      </div>
      <div class="item">
        <div class="item-label">地层显隐</div>
        <div class="item-input">
          <el-select
            v-model="stratums"
            placeholder="请选择地层"
            style="width: 100%"
            multiple
            collapse-tags
            @change="onStratumChange"
          >
            <el-option
              v-for="item in options"
              :key="item.index"
              :label="item.name"
              :value="item.index"
            />
          </el-select>
        </div>
      </div>
      <div class="item vertical">
        <div class="item-label">剖切</div>
        <div class="item-input">
          <el-button @click="onCommand('draw-point')"> 选点 </el-button>
          <el-button @click="onShowInputDialog"> 自定义剖面 </el-button>
          <el-button @click="onCommand('section')"> 生成剖面 </el-button>
          <el-button @click="onCommand('burrow')"> 生成挖洞 </el-button>
          <el-button @click="onCommand('remove-section')"> 移除剖面 </el-button>
          <el-button @click="onCommand('clear-burrow')"> 移除挖洞 </el-button>
        </div>
      </div>
      <div class="item vertical">
        <div class="item-label">剖面</div>
        <div class="item-input">
          <el-button size="small" @click="onCommand('remove-section')">
            移除
          </el-button>
          <div class="slider">
            <div style="width: 60px">抬升</div>
            <el-slider
              @input="(value) => onCommand('section-liftup', value)"
              :min="0"
              :max="1000"
              size="small"
              v-model="sectionLiftingVal"
            />
          </div>
        </div>
      </div>
      <div class="item vertical" v-show="false">
        <div class="item-label">测量工具</div>
        <div class="item-input">
          <el-tooltip effect="dark" content="坐标查询" placement="bottom">
            <el-button size="small" :icon="LocationFilled"> </el-button>
          </el-tooltip>
          <!-- <el-tooltip effect="dark" content="属性查询" placement="bottom">
            <el-button size="small" :icon="ChatLineSquare"> </el-button>
          </el-tooltip> -->
          <el-tooltip effect="dark" content="距离测量" placement="bottom">
            <el-button size="small" :icon="Sort"> </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="面积测量" placement="bottom">
            <el-button size="small" :icon="Crop"> </el-button>
          </el-tooltip>
        </div>
      </div>
      <div class="item vertical" v-show="false">
        <div class="item-label">终了模型</div>
        <div class="item-input">
          <el-radio-group v-model="modelType" @change="onModelChange">
            <el-radio :value="1492">现状</el-radio>
            <el-radio :value="1410">一期</el-radio>
            <el-radio :value="1493">二期</el-radio>
          </el-radio-group>
          <!-- <el-button size="small" @click="onOpenPlanDialog">
            终了模型
          </el-button>
          <el-button size="small" @click="onCommand('clear-burrow')">
            还原
          </el-button> -->
        </div>
      </div>
      <!-- <div class="item vertical" v-show="false">
        <div class="item-label">测量</div>
        <div class="item-input">
          <el-button size="small"> 距离测量 </el-button>
          <el-button size="small"> 面积测量 </el-button>
        </div>
      </div> -->
      <!-- <div class="item vertical">
        <div class="item-label">虚拟钻孔</div>
        <div class="item-input">
          <el-button size="small" @click="onCommand('draw-point')">
            选点
          </el-button>
          <el-button size="small" @click="onCommand('start-drilling')">
            生成虚拟钻孔
          </el-button>
          <el-button size="small" @click="onCommand('start-drilling')">
            清除虚拟钻孔
          </el-button>
        </div>
      </div> -->
    </div>
    <!-- <mining-plan-dialog
        ref="MiningPlanDialogRef"
        @ok="onPlanConfirm"
      ></mining-plan-dialog> -->
    <input-point-dialog
      ref="InputPointDialogRef"
      @ok="onInputConfirm"
    ></input-point-dialog>
  </card-layout>
</template>

<script setup>
import {
  Close,
  LocationFilled,
  ChatLineSquare,
  Sort,
  Crop,
  Link,
  Warning,
} from "@element-plus/icons-vue";
import { cloneDeep } from "lodash";
import cache from "@/plugins/cache";
// import MiningPlanDialog from "./MiningPlanDialog";
import InputPointDialog from "./InputPointDialog";
import useReservesStore from "@/store/modules/reserves";

const { proxy } = getCurrentInstance();
const wireframeEnabled = ref(false);
// const showLayer = ref(true);
const showMark = ref(false);
const liftingVal = ref(0);
const explosionVal = ref(0);
const scaleVal = ref(0);
const sectionLiftingVal = ref(0);
const showAlt = ref(false);
const liftingChecked = ref(false);
const propertyQuery = ref(false);
const explosionChecked = ref(false);
const layerSelectedChecked = ref(false);
const modelType = ref(1492);

const emits = defineEmits(["close", "command"]);

const options = computed(
  () =>
    useReservesStore().modelLayerList.map((name, index) => ({ name, index })) ||
    []
);
watch(
  () => options.value,
  (newValue, oldValue) => {
    stratums.value = newValue.map((item) => item.index);
  }
);

const stratums = ref([]);

const onModelChange = (value) => {
  wireframeEnabled.value = false;
  showMark.value = false;
  scaleVal.value = 0;
  sectionLiftingVal.value = 0;
  showAlt.value = false;
  liftingChecked.value = false;
  propertyQuery.value = false;
  explosionChecked.value = false;
  layerSelectedChecked.value = false;

  emits("command", "load-model", value);
};

const onLiftingChange = (value) => {
  emits("command", "lifting", value);
};

const onLayerSelectedChecked = (value) => {
  emits("command", "layerSelected", value);
  if (value) {
    explosionChecked.value = false;
    onExplosionChecked(false);
    liftingChecked.value = false;
    onLiftingChecked(false);
  }
};

const onShowMarkChecked = (value) => {
  if (value) {
    explosionChecked.value = false;
    onExplosionChecked(false);
  }
  emits("command", "showMark", value);
};

const onShowPropertyNameChekced = (value) => {
  emits("command", "propertyQuery", value);
};

const onShowAltChecked = (value) => {
  emits("command", "showAlt", value);
};

const onLiftingChecked = (value) => {
  if (value) emits("command", "lifting", 250);
  else emits("command", "lifting", 0.1);
};

const onExplosionChecked = (value) => {
  if (value) {
    showMark.value = false;
    onShowMarkChecked(false);
    emits("command", "explosion", 50);
  } else emits("command", "explosion", 0);
};

const onExplosionChange = (value) => {
  emits("command", "explosion", value);
};

const onScaleChange = (value) => {
  emits("command", "scale", value);
};

const onWireframeChecked = (checked) => {
  emits("command", "wireframe", checked);
};

const onShowLayerChecked = (layers) => {
  emits("command", "showLayer", layers);
};

const onStratumChange = (value) => {
  // console.log("地层",value)
  emits("command", "showLayer", value);
};

const onCommand = (key, value) => {
  emits("command", key, value);
};

const onClose = () => {
  emits("close");
};

const onOpenPlanDialog = () => {
  proxy.$refs["MiningPlanDialogRef"].show();
};

const onLink = () => {
  proxy.$refs["OreBodyDialogRef"].show();
};

const onPlanConfirm = (params) => {
  console.log("开采参数", params);
  emits("command", "designPlan", params);
};

/**
 * 坐标输入完成回调
 */
const onInputConfirm = (value) => {
  emits("command", "inputSection", value);
};

const onShowInputDialog = () => {
  proxy.$refs["InputPointDialogRef"].show();
};
</script>

<style lang="less" scoped>
.chart {
  height: 100%;
}

.card-form {
  box-sizing: border-box;
  padding: 4px 12px;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 40px;
    &-label {
      flex: 1;
      color: #dedede;
    }

    &-input {
      flex: 1.8;
      // text-align: right;
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    &.vertical {
      flex-direction: column;
      margin: 0px 0px;
      .item-label {
        width: 100%;
        text-align: left;
        margin: 0px 0px;
      }

      .item-input {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        .el-button {
          margin-left: 0px;
          margin: 4px 0px;
        }
        //   text-align: left;
      }

      .slider {
        flex: 1;
        color: #53b6ba;
        display: flex;
        align-items: center;
        margin-left: 4px;
      }
    }
  }
}
</style>
